import * as React from "react";
import { Modal, message } from "antd";
// 使用 Ant Design 风格
import FormRender from "form-render/lib/antd";
import { cloneDeep } from "lodash";
import { getSchema } from "./from";
import { Deviceadd } from "../../../deviceseversapi";
import { AjaxData } from "../../../../../../data/interface/publicInterface";

export interface VirtualDeviceAddModalProps {
  visible: boolean;
  onOk: () => any;
  onCancel: () => any;
  subItem: any[];
  defaultValue?: any;
}

export interface VirtualDeviceAddModalState {
  visible: boolean;
  formData: VirtualDeviceAddData;
  valid: string[];
  fromPass: boolean;
  subItem: any[];
}
interface VirtualDeviceAddData {
  name: string;
  no: string;
  energyType: string;
  installAddr: string;
}
class VirtualDeviceAddModal extends React.Component<
  VirtualDeviceAddModalProps,
  VirtualDeviceAddModalState
> {
  state = {
    visible: false,
    formData: { name: "", no: "", energyType: "", installAddr: "" },
    valid: [],
    fromPass: false,
    subItem: [],
  };

  /**钩子函数 */
  componentWillMount() {}
  shouldComponentUpdate(
    newProps: VirtualDeviceAddModalProps,
    newState: VirtualDeviceAddModalState
  ) {
    if (newProps.visible !== this.props.visible) {
      console.log(newProps.subItem);
      this.setState({
        visible: newProps.visible,
        subItem: newProps.subItem,
      });
      if (newProps.defaultValue) {
        let defaultValue = cloneDeep(newProps.defaultValue);
        this.setState({ formData: defaultValue });
      }
    }
    return true;
  }
  /**操作 */
  //确认
  onHandleOk() {
    this.onSubmit();
  }
  //取消
  onHandleCancel() {
    this.props.onCancel();
    this.clear();
  }
  clear() {
    this.setState({
      formData: { name: "", no: "", energyType: "", installAddr: "" },
    });
  }
  //提交校验
  onSubmit = () => {
    // valid 是校验判断的数组，valid 长度为 0 代表校验全部通过
    let { valid, formData } = this.state;
    if (valid.length > 0) {
      message.error(`校验未通过,请检查字段输入`);
    } else {
      this.setState({ fromPass: true });
      if (this.props.defaultValue) {
        this.getPream(formData, this.props.defaultValue);
      } else {
        this.getPream(formData);
      }
    }
  };
  getPream(formData: VirtualDeviceAddData, defaultValue?: any) {
    let pream: any = cloneDeep(formData);
    if (defaultValue) {
      pream.id = defaultValue.id;
    }
    pream.isFictitious = "1";
    this.save(pream);
  }
  /**请求数据 */
  //Deviceadd
  async save(pream: any) {
    let _this = this;
    try {
      let res: any = await Deviceadd(pream);
      let json: AjaxData = res;
      if (json.success) {
        this.props.onOk();
        this.clear();
      } else {
        Modal.error({
          title: json.message,
          onOk: () => {
            _this.props.onOk();
            _this.clear();
          },
        });
      }
    } catch (error) {
      Modal.error({
        title: "初始化程序失败，无法读取数据，请刷新页面。",
        onOk: () => {},
      });
      console.error(error);
    }
  }

  render() {
    return (
      <Modal
        title={this.props.defaultValue ? "编辑虚拟设备" : "新增虚拟设备"}
        visible={this.state.visible}
        onOk={() => {
          this.onHandleOk();
        }}
        onCancel={() => {
          this.onHandleCancel();
        }}
        maskClosable={false}
      >
        <FormRender
          schema={getSchema(this.state.subItem)}
          formData={this.state.formData}
          onChange={(formData: VirtualDeviceAddData) => {
            this.setState({ formData });
          }}
          onValidate={(valid: string[]) => {
            this.setState({ valid });
          }}
          showValidate={this.state.fromPass}
        />
      </Modal>
    );
  }
}

export default VirtualDeviceAddModal;
